<template>
    <view>
        <!-- <u-navbar title="审核商品" :is-back="false"></u-navbar> -->
        <view class="tabs">
            <u-tabs
                ref="tabs"
                :current="current"
                :list="tabList"
                bar-height="6"
                bar-width="50"
                active-color="#606DCE"
                font-size="28"
                inactive-color="#888888"
                :is-scroll="false"
                @change="change"
            ></u-tabs>
        </view>
        <!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
        <view class="all">
            <view class="card" v-for="(item, index) in list" :key="index">
                <!-- <view class="top u-flex u-col-top u-row-between u-border-bottom">
						<view>
							<view>审核人：小黄童学</view>
							<view>单号：32332155215215DF</view>
							<view>创建时间：2024-01-22 12:58:05</view>
						</view>
					</view> -->
                <view class="u-flex-center u-row-left">
                    <image
                        :src="item.image"
                        mode="aspectFill"
                        class="head-img"
                    ></image>
                    <view class="cont">
                        <view class="name u-line-2">{{ item.title }}</view>
                        <view class="u-flex u-row-between u-m-t-30">
                            <view class="price"
                                ><text>￥</text>{{ item.price }}</view
                            >
                            <view class="state" v-if="item.audit == 0"
                                >待审核</view
                            >
                            <view
                                class="state"
                                style="color: #606dce"
                                v-if="item.audit == 1"
                                >通过</view
                            >
                            <view
                                class="state"
                                style="color: #ff0000"
                                v-if="item.audit == 2"
                                >驳回</view
                            >
                            <!-- <view class="number">×1</view> -->
                        </view>
                    </view>
                </view>
                <!-- v-if="current==2" -->
                <view
                    class="u-p-t-30 u-m-t-30 u-border-top"
                    v-if="item.audit == 2"
                >
                    <view class="message">拒绝原因：{{ item.why }}</view>
                </view>
            </view>
        </view>
        <!-- </mescroll-body> -->
        <u-tabbar
            v-model="currentTab"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabsList"
        ></u-tabbar>
    </view>
</template>

<script>
// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { BaseUrl } from "../../utils/req";
export default {
    // mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            BaseUrl,
            tabList: [
                {
                    name: "全部",
                },
                {
                    name: "待审核",
                },
                {
                    name: "已通过",
                },
                {
                    name: "已拒绝",
                },
            ],
            flowList: [],
            current: 0,
            type: "-1",
            tabsList: [
                {
                    iconPath: BaseUrl + "/static/wdcp-fl.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-dd.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-dd-active.png",
                //     text: "订单",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-sh.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-yf.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-yf-active.png",
                //     text: "运费",
                // },
                {
                    iconPath: BaseUrl + "/static/wdcp-wd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            currentTab: 2,
            page: 1,
            list: [],
        };
    },
    onReady() {
        this.getList();
    },
    methods: {
        confirm(id) {
            this.$u
                .post("scholar/order_complete", {
                    id: id,
                })
                .then((res) => {
                    this.$u.toast(res.msg);
                    if (res.code == 1) {
                        this.mescroll.resetUpScroll();
                    }
                });
        },
        upCallback(page) {
            this.mescroll.optUp.textNoMore = "-已经到底啦-";
            this.$u
                .post("scholar/order_list", {
                    page: page.num,
                    limit: page.size,
                    id: this.type,
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        change(index) {
            this.current = index;
            // this.mescroll.resetUpScroll();
            this.getList();
        },
        changeTab(e) {
            if (e == 0) {
                uni.redirectTo({ url: "/yCreate/pages/goodsManagement" });
            } else if (e == 1) {
                uni.redirectTo({ url: "/yCreate/pages/orderManagement" });
            } else if (e == 4) {
                uni.redirectTo({ url: "/wNew/pages/mine" });
            } else if (e == 3) {
                uni.redirectTo({ url: "/wNew/pages/freight" });
            }
        },
        getList() {
            this.$u
                .post("/api/shop/shop_goods_list", {
                    page: this.page,
                    audit: this.current,
                })
                .then((res) => {
                    if (res.code == 1) {
                        if (this.page == 1) {
                            this.list = res.data.data;
                        } else {
                            let list = this.list;
                            list = list.concat(res.data.data);
                            this.list = list;
                        }
                    } else {
                    }
                });
        },
    },
    onReachBottom() {
        this.page = Number(this.page) + 1;
        this.getList();
    },
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}
.tabs {
    position: sticky;
    top: 0;
    z-index: 999;
}
.all {
    padding: 0 24rpx;
    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 30rpx 20rpx;
        background: #ffffff;
        border-radius: 10rpx;

        .top {
            padding-bottom: 30rpx;
            margin-bottom: 30rpx;
            font-size: 24rpx;
            .state {
                color: #888;
            }
        }
        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }
        .cont {
            width: 100%;
            .name {
                margin-bottom: 22rpx;
                font-size: 28rpx;
            }
            .content {
                font-size: 24rpx;
                color: #888888;
            }
            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;
                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }
                text {
                    font-size: 32rpx;
                }
            }
            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;
                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }
            .number {
                font-size: 28rpx;
                font-weight: bold;
                color: #222222;
            }
        }
    }
}
.message {
    font-size: 24rpx;
    font-weight: bold;
}
</style>
